<template>
	<view>
		<view class="topic">
			<u--form labelPosition="left" :model="recordList" :rules="rules" ref="recordList">
				<text class="topic_title">核查记录时间</text>
				<u-form-item prop="inspTime" borderBottom @click="showDate = true;">
					<uni-datetime-picker :show="showDate" @close='showDate = false;' v-model="recordList.inspTime"
						type="date" :clear-icon="false" />
				</u-form-item>
				<text class="topic_title">本企业是否有安全隐患</text>
				<u-form-item prop="isRisks" borderBottom @click="showDate = true;">
					<u-radio-group v-model="recordList.isRisks" size='30' style='margin:35rpx 0;'>
						<u-radio activeColor="#1590EF" labelSize='30' label="是" name='1'
							style='width: 45%;padding: 10rpx;'>
						</u-radio>
						<u-radio activeColor="#1590EF" labelSize='30' label="否" name='2'
							style='width: 45%;padding: 10rpx;'>
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<text class="topic_title ">安全隐患说明</text>
				<u-form-item prop="danger" borderBottom>
					<u--textarea v-model="recordList.danger" height='200'></u--textarea>
				</u-form-item>
				<text class="topic_title ">检查记录附件</text>
				<u-form-item prop="file" borderBottom>
					<view class="file-list clearfix">
						<view class="file-item" v-for="(item,index) in recordList.files">
							<image class="file-img" :src="item.temp" mode="aspectFit"></image>
							<view class="file-del" @click="fileDel(index)"></view>
						</view>
						<view class="file-item file-upload-btn" @click="selectFile"></view>
					</view>

				</u-form-item>
			</u--form>
		</view>
		<view>
			<u-button type="primary" size="large" text="提交" shape="circle" class='submit' @click='submitClick(1)'>
			</u-button>
		</view>
	</view>
</template>

<script>
	import * as api from '@/common/api/supervise.js'
	export default {
		components: {},
		data() {
			return {
				recordList: {
					inspTime: "",
					isRisks: "",
					danger: "",
					files: []
				},
				rules: {
					'danger': {
						type: 'string',
						required: true,
						message: '请填写安全隐患说明',
						trigger: ['blur', ]
					},
					'inspTime': {
						type: 'string',
						required: true,
						message: '请选择检查时间',
						trigger: ['blur','change' ]
					},
					
					'isRisks': {
						type: 'string',
						required: true,
						message: '请选择是否有安全隐患',
						trigger: ['change', ]
					},
					

				},
				showDate: false,
				options: {},
				files: []

			}
		},
		onLoad(option) {
			this.options = option
		},
		mounted() {},
		methods: {
			//提交
			submitClick() {
				const submitData = {
					...this.options,
					...this.recordList,
				}
				this.$refs.recordList.validate().then(res => {
					api.default.inspectionSave(submitData).then(() => {
						uni.showToast({
							title: '提交成功！',
							icon: 'none',
							duration: 2000
						})
						this.$goBack('./checkTask', 5)
					})

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 点击选择图片
			selectFile() {
				if (this.recordList.files.length == 9) {
					uni.showToast({
						title: "最多上传9个",
						icon: 'none'
					})
					return;
				}
				uni.chooseImage({
					count: 9 - this.recordList.files.length,
					success: (chooseImageRes) => {
						// console.log(chooseImageRes)
						uni.uploadFile({
							url: '/data-inspection-study/insp_file/upload',
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const fileData = uploadFileRes.data ? JSON.parse(uploadFileRes
									.data) : ''
								if (fileData && fileData.code == 200) {
									this.recordList.files.push({
										id: fileData.data.id,
										temp: chooseImageRes.tempFilePaths[0]
									})
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									})
								}
							}
						});
					}
				});
			},

			// 删除已上传的图片
			fileDel(index) {
				this.recordList.files.splice(index, 1)
			},

		},
	}
</script>

<style lang="scss" scoped>
	.progressBar {
		padding: 20rpx;
	}

	.topic {
		padding: 20rpx 40rpx;
		border-bottom: 1px #F1F1F1 solid;

	}

	.topic_title {
		display: block;
		margin: 30rpx 0;
		border-left: 2px #1590EF solid;
		padding: 0 20rpx;
	}


	.submit {
		width: 50%;
		position: fixed;
		bottom: 15px;
		left: 50%;
		transform: translateX(-50%);
	}

	.file-list {
		flex: 1;

		.file-item {
			float: left;
			width: 22%;
			text-align: center;
			height: 140rpx;
			line-height: 140rpx;
			margin-right: 4%;
			margin-bottom: 2%;
			position: relative;

			.file-img {
				max-width: 100%;
				max-height: 100%;
				vertical-align: middle;
			}

			.file-del {
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(30%, -30%);
				border-radius: 50%;
				width: 0;
				height: 0;
				border: 20rpx solid #f00;

				&::after {
					content: "";
					width: 20rpx;
					display: block;
					transform: translate(-50%, -50%);
					background-color: #ffffff;
					height: 4rpx;
				}
			}

			&:nth-child(4n) {
				margin-right: 0;
			}

			&:nth-child(n+5) {
				margin-top: calc(4% / 3);
			}

		}

		.file-upload-btn {
			box-sizing: border-box;
			border: 1px solid #ddd;
			background: url('/static/img/camera.png') no-repeat center;
			background-size: 70%;
		}
	}
</style>
